<template>
    <el-card shadow="never" style="margin-bottom: 5px;">
        <div class="card">
            <el-image style=" height: 70px" :src="props.data.img_url_arr[0]" fit="cover" />
            <div style="width: 100px;">
                <p class="text" v-if="tabStore.assembly_type === 'CPU'">{{ props.data.manufacturers }}-{{
                    props.data.series }}-{{
                    props.data.code_name
                }}</p>
                <p class="text" v-else-if="tabStore.assembly_type === 'GPU'">{{ props.data.codeName }}</p>
                <p class="text" v-else-if="tabStore.assembly_type === '主板'">{{ props.data.series }}</p>
                <p class="text" v-else>{{ props.data.manufacturers }}</p>
            </div>

            <el-button @click="clearCom" size="small" :icon="CloseBold" circle />
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue'
import { defineProps } from 'vue'
import { useTabStore } from '@/store/useTabStore'
import { useComAssStore } from '@/store/useComAssStore'
const tabStore = useTabStore()
const comAssStore = useComAssStore()

const props = defineProps({
    data: {} as any,
    index: Number
})

const clearCom = () => {
    comAssStore.clearCompare(props.index)
}

</script>

<style scoped lang="scss">
.card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .text {
        font-size: 12px;
        font-weight: bold;
        margin-left: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}
</style>